<template>
    <div class="app-container">
      <div class="container">
        <el-tabs v-model="activeName" @tab-click="handleClick">
  <!--        设备参数-->
          <el-tab-pane label="设备参数" name="first">
            <el-form ref="form" :model="form" label-width="100px">
  <!--            1-->
              <el-row>
                <el-col :span="6" :xs="12">
                  <el-form-item label="设备名称" prop="deviceName">
                    <el-input v-model="form.deviceName" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :xs="12">
                  <el-form-item label="采集频率" prop="sampleTime">
                    <el-select
                        v-model="form.sampleTime"
                        placeholder="请选择"
                        filterable
                        style="width: 100%"
                    >
                      <el-option
                          v-for="item in sampleOption"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :xs="12">
                  <el-form-item label="发送频率" prop="sendTime">
                    <el-select
                        v-model="form.sendTime"
                        placeholder="请选择"
                        filterable
                        style="width: 100%"
                    >
                      <el-option
                          v-for="item in sendOption"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :xs="12">
                  <el-form-item label="拍照频率" prop="ptime">
                    <el-select
                        v-model="form.ptime"
                        placeholder="请选择"
                        filterable
                        style="width: 100%"
                    >
                      <el-option
                          v-for="item in ptimeOption"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
  <!--            2-->
              <el-row>
                <el-col :span="6" :xs="12">
                  <el-form-item label="设备ID" prop="deviceId">
                    <el-input v-model="form.deviceId" :disabled="true" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :xs="12">
                  <el-form-item label="通信协议" prop="protocolType">
                    <el-input v-model="form.protocolType" :disabled="true" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :xs="12">
                  <el-form-item label="设备状态" prop="deviceStatus">
                    <el-input v-model="form.deviceStatus" :disabled="true" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
  <!--            3-->
              <el-row>
                <el-col :span="6" :xs="12">
                  <el-form-item label="版本号" prop="version">
                    <el-input v-model="form.version" :disabled="true" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :xs="12">
                  <el-form-item label="域名" prop="domain">
                    <el-input v-model="form.domain" :disabled="true" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :xs="12">
                  <el-form-item label="设备类型" prop="deviceType">
                    <el-input v-model="form.deviceType" :disabled="true" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
  <!--            4-->
              <el-row>
                <el-col :span="6" :xs="12">
                  <el-form-item label="控制字节" prop="ctrlWord">
                    <el-input v-model="form.ctrlWord" :disabled="true" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :xs="12">
                  <el-form-item label="告警周期" prop="warnTime">
                    <el-input v-model="form.warnTime" :disabled="true" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :xs="12">
                  <el-form-item label="错误代码上报" prop="errorCode">
                    <el-input v-model="form.errorCode" :disabled="true" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
  <!--            5-->
              <el-row>
                <el-col :span="6" :xs="24">
                  <el-form-item label="经度" prop="longitude">
                    <el-input v-model="form.longitude" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :xs="24">
                  <el-form-item label="纬度" prop="latitude">
                    <el-input v-model="form.latitude" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :xs="24">
                  <el-form-item label="储存方式" prop="hist">
                    <el-select
                        v-model="form.hist"
                        placeholder="请选择"
                        filterable
                        style="width: 100%"
                    >
                      <el-option
                          v-for="item in BlockOption"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
  <!--            6-->
              <el-row>
                <el-col :span="6" :xs="24">
                  <el-form-item label="远程地址" prop="ipPort">
                    <el-input v-model="form.ipPort" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :xs="24">
                  <el-form-item label="地理位置" prop="addr">
                    <el-input v-model="form.addr" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :xs="24">
                  <el-form-item label="卡费到期时间" prop="simTime">
                    <el-date-picker
                        v-model="form.simTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期时间"
                        style="width: 100%">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="6" :xs="24">
                  <el-form-item label="卡序列号">
                    <el-input v-model="form.tel" placeholder="请输入" :disabled="true"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24" :xs="24">
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit" class="btn">保存修改</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
  <!--        通道参数-->
          <el-tab-pane label="通道参数" name="second">
  <!--          通道1-->
            <div style="margin-bottom: 15px;" v-for="(item, index) in channelList" :key="index">
              <p style="color: #FFFFFF;">通道{{ item.channelNo }}</p>
              <div style="background: #0C323A;border-radius: 5px;padding: 15px 30px 0 20px;">
                <el-form ref="item" :model="item" label-width="80px">
                  <el-row>
                    <el-col :span="6" :xs="12">
                      <el-form-item label="通道名称" prop="channelName">
                        <el-input v-model="item.channelName" placeholder="请输入"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" :xs="12">
                      <el-form-item label="通道类型" prop="channelType">
                        <el-input v-model="item.channelType" :disabled="true" placeholder="请输入"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" :xs="12">
                      <el-form-item label="量程上限" prop="upRange">
                        <el-input v-model="item.upRange" :disabled="true" placeholder="请输入"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" :xs="12">
                      <el-form-item label="量程下限" prop="downRange">
                        <el-input v-model="item.downRange" :disabled="true" placeholder="请输入"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" :xs="12">
                      <el-form-item label="精度选择" prop="channelPrecision">
                        <el-select
                            v-model="item.channelPrecision"
                            placeholder="请选择"
                            filterable
                            style="width: 100%"
                        >
                          <el-option
                              v-for="item in AccuracyOption"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" :xs="12">
                      <el-form-item label="迁移值K" prop="compensatK">
                        <el-input v-model="item.compensatK" placeholder="请输入"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" :xs="12">
                      <el-form-item label="迁移值B" prop="compensatB">
                        <el-input v-model="item.compensatB" placeholder="请输入"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" :xs="12">
                      <el-form-item label="单位备注" prop="channelUnit">
                        <el-input v-model="item.channelUnit" placeholder="请输入"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24" :xs="24">
                      <el-form-item>
                        <el-button type="primary" @click="onSubmit1(item.id)" class="btn">保存修改</el-button>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </div>
          </el-tab-pane>
  <!--        SIM卡详情-->
  <!--        <el-tab-pane label="SIM卡详情" name="third">-->
  <!--          <div style="background: #0C323A; border-left: 5px solid #00E7E7; width: 100%; height: 50px; line-height: 50px; margin-bottom: 10px;">-->
  <!--            <p style="margin-left: 10px;color: #FFFFFF;">基本信息</p>-->
  <!--          </div>-->
  <!--          <el-form ref="form5" :model="form5" label-width="90px">-->
  <!--            <el-row>-->
  <!--              <el-col :span="6" :xs="12">-->
  <!--                <el-form-item label="卡序列号">-->
  <!--                  <el-input v-model="form.tel" placeholder="请输入" :disabled="true"></el-input>-->
  <!--                </el-form-item>-->
  <!--              </el-col>-->
  <!--              <el-col :span="6" :xs="12">-->
  <!--                <el-form-item label="IMSI">-->
  <!--                  <el-input v-model="form5.name" placeholder="请输入"></el-input>-->
  <!--                </el-form-item>-->
  <!--              </el-col>-->
  <!--              <el-col :span="6" :xs="12">-->
  <!--                <el-form-item label="使用者手机">-->
  <!--                  <el-input v-model="form5.name" placeholder="请输入"></el-input>-->
  <!--                </el-form-item>-->
  <!--              </el-col>-->
  <!--              <el-col :span="6" :xs="12">-->
  <!--                <el-form-item label="激活日期">-->
  <!--                  <el-date-picker type="date" placeholder="选择日期" v-model="form5.date1" style="width: 100%;"></el-date-picker>-->
  <!--                </el-form-item>-->
  <!--              </el-col>-->
  <!--              <el-col :span="6" :xs="12">-->
  <!--                <el-form-item label="失效日期">-->
  <!--                  <el-date-picker type="date" placeholder="选择日期" v-model="form5.date2" style="width: 100%;"></el-date-picker>-->
  <!--                </el-form-item>-->
  <!--              </el-col>-->
  <!--              <el-col :span="6" :xs="12">-->
  <!--                <el-form-item label="本月卡用量">-->
  <!--                  <el-input v-model="form5.name" placeholder="请输入"></el-input>-->
  <!--                </el-form-item>-->
  <!--              </el-col>-->
  <!--            </el-row>-->
  <!--          </el-form>-->
  <!--        </el-tab-pane>-->
        </el-tabs>
      </div>
    </div>
  </template>
  
  <script>
  import { getDeviceInfo, upDateDevice, getChannelParameters, upDateChannel } from '@/api/dev/index'
  export default {
    name: "edits",
  components: {},
    data() {
      return {
        // 绑定值，选中选项卡的 name
        activeName: 'first',
        // 设备参数表单
        form: {},
        // 采集频率
        sampleOption: [{ value: 1, label: '1分钟'},{ value: 5, label: '5分钟'},
          { value: 10, label: '10分钟'},{ value: 30, label: '30分钟'},
          { value: 60, label: '1小时'},{ value: 360, label: '6小时'},
          { value: 720, label: '12小时'},{ value: 1440, label: '24小时'}],
        // 发送频率
        sendOption: [{ value: 1, label: '1分钟'},{ value: 5, label: '5分钟'},
          { value: 10, label: '10分钟'},{ value: 30, label: '30分钟'},
          { value: 60, label: '1小时'},{ value: 360, label: '6小时'},
          { value: 720, label: '12小时'},{ value: 1440, label: '24小时'}],
        // 拍照频率
        ptimeOption: [ { value: 0, label: '无摄像头'}, { value: 5, label: '5分钟'},
          { value: 10, label: '10分钟'}, { value: 30, label: '30分钟'},
          { value: 60, label: '1小时'}, { value: 360, label: '6小时'},
          { value: 720, label: '12小时'}, { value: 1440, label: '24小时'}],
        // 设备参数表单中储存方式
        BlockOption: [{ value: 0, label:'不保存'},{ value: 1, label:'预留'},
          { value: 2, label:'正常历史数据保存'}],
        //精度选择
        AccuracyOption: [{ value: 0, label: '0位'},{ value: 1, label: '1位'},
          { value: 2, label: '2位'},{ value: 3, label: '3位'}],
        // 通道参数1
        form1: {},
        //SIM卡详情
        form5: {
          name: '',
          date1: '',
          date2: ''
        },
        ids: '',
        datas: '',
        // 通道列表
        channelList: [],
      }
    },
    props: {},
    watch: {},
    created() {
      this.ids = this.$route.query.Datas
      console.log(this.ids)
      this.datas = this.$route.query.Data
      console.log(this.datas)
      this.getParamsInfo()
      this.getChannelInfo()
    },
    mounted() {
    },
    methods: {
      // tab选项卡
      handleClick(tab, event) {
        console.log(tab, event);
      },
      // 获取设备参数详情数据
      getParamsInfo() {
        getDeviceInfo(this.ids).then((res) => {
          this.form = res.data
          console.log(this.form, 'form')
            if (res.data.deviceStatus === 1) {
              res.data.deviceStatus = '正常'
            } else if (res.data.deviceStatus === 2) {
              res.data.deviceStatus = '拆机'
            } else if (res.data.deviceStatus === 3) {
              res.data.deviceStatus = '水浸'
            }
        }).catch((err) => {
          console.log(err)
          this.$message.error(err.errorMsg)
        })
      },
      //  设备参数表单提交
      onSubmit() {
        const data = {
          id: this.form.id,
          deviceName: this.form.deviceName,
          sampleTime: this.form.sampleTime,
          sendTime: this.form.sendTime,
          ptime: this.form.ptime,
          latitude: this.form.latitude,
          longitude: this.form.longitude,
          hist: this.form.hist,
          ipPort: this.form.ipPort,
          addr: this.form.addr,
          simTime: this.form.simTime,
        }
        upDateDevice(data).then((res) => {
          console.log(res)
          this.$message.success('修改成功！')
        }).catch((err) => {
          console.log(err)
        })
      },
      // 通道参数列表
      getChannelInfo() {
        getChannelParameters(this.datas).then((res) => {
          console.log(res)
          this.channelList = res.data
          // this.form1 = res.data[0]
        }).catch((err) => {
          console.log(err)
        })
      },
      //  通道参数1表单提交
      onSubmit1(id) {
        console.log(id)
        const ids = id
        let emptyObj
        // try {
          this.channelList.map((item,index)=>{
            if(item.id == ids) {
              emptyObj = {
                channelName: item.channelName,
                channelPrecision: item.channelPrecision,
                channelUnit: item.channelUnit,
                compensatB: item.compensatB,
                compensatK: item.compensatK
              }
            }
          })
        // } catch (err) {}
        const data = {
          id: ids,
          channelName: emptyObj.channelName,
          channelPrecision: emptyObj.channelPrecision,
          channelUnit: emptyObj.channelUnit,
          compensatB: emptyObj.compensatB,
          compensatK: emptyObj.compensatK
        }
        upDateChannel(data).then((res) => {
          console.log(res)
          this.$message.success('修改成功！')
          this.getChannelInfo()
        }).catch((err) => {
          console.log(err.errorMsg)
        })
      }
    },
  }
  </script>
  
  <style lang='less' scoped>
  .app-container {
    width: 100%;
    min-height: 100%;
    padding: 15px;
    box-sizing: border-box;
    background: #0C323A;
    .container {
      width: 100%;
      background: #002127;
      padding:10px;
      border-radius: 2px;
      // 面板左对齐
      ::v-deep .el-tabs__nav-scroll {
        justify-content: flex-start;
      }
      // 面板内容距离标题
      ::v-deep .el-tab-pane {
        margin-top: 15px;
      }
      //面板标题字颜色
      ::v-deep .el-tabs__item {
        color: #999999;
      }
      //鼠标经过面板标题字颜色，选中后字颜色
      ::v-deep .el-tabs__item:hover,
      ::v-deep .el-tabs__item.is-active {
        color: #FFFFFF;
      }
      // 线条颜色
      ::v-deep .el-tabs__nav-wrap::after {
        background-color: #002127;
      }
      // 点击tab时线条颜色
      ::v-deep .el-tabs__active-bar {
        background-color: #00E7E7;
      }
    //  按钮
      .btn {
        background: #00B8B8;
        color: white;
        border: none;
      }
    }
    ::v-deep(.el-form){
      //background: rgba(4,28,33,0.8);
      //box-shadow: 0px 0px 20px 0px rgba(0,231,231,0.5);
      //border-radius: 20px;
      //border: 1px solid rgba(0,231,231,0.698);
      // 输入框label字体颜色
      .el-form-item__label {
        color: white;
      }
      // 输入框
      .el-input__inner {
        background: #041C21;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid rgba(0,231,231,0.502);
        color: white;
      }
    }
  }
  
  
  
  </style>
  